<!--
 * @Author: awada 10254500+awadaawada@user.noreply.gitee.com
 * @Date: 2022-10-13 10:16:21
 * @LastEditors: awada 10254500+awadaawada@user.noreply.gitee.com
 * @LastEditTime: 2022-10-15 18:50:36
 * @FilePath: \JavaScriptd:\Briup\实训三\项目\第三个项目\点单项目\HeyTea_project\HeyTea-ui\src\pages\components\dingdan_chart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container10" />
</template>
<script>
import { Column } from '@antv/g2plot'
export default {
  mounted() {
    this.getchart4()
  },

  methods: {
    getchart4() {
      fetch('https://gw.alipayobjects.com/os/antfincdn/PC3daFYjNw/column-data.json')
        .then((data) => data.json())
        .then((data) => {
          const column = new Column('container10', {
            data,
            xField: 'city',
            yField: 'value',
            seriesField: 'type',
            isGroup: 'true',
            height: 500,
            columnStyle: {
              radius: [20, 20, 0, 0]
            }
          })

          column.render()
        })
    }

  }
}
</script>
